<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浏览器信息检测器</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        padding: 20px;
        color: #333;
      }

      .container {
        max-width: 1200px;
        margin: 0 auto;
      }

      .header {
        text-align: center;
        margin-bottom: 40px;
        color: white;
      }

      .header h1 {
        font-size: 2.5rem;
        margin-bottom: 10px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      }

      .header p {
        font-size: 1.1rem;
        opacity: 0.9;
      }

      .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
      }

      .info-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        padding: 25px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      .info-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
      }

      .card-title {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 15px;
        color: #4a5568;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .card-icon {
        width: 24px;
        height: 24px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 14px;
      }

      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #e2e8f0;
      }

      .info-item:last-child {
        border-bottom: none;
      }

      .info-label {
        font-weight: 500;
        color: #4a5568;
        flex: 1;
      }

      .info-value {
        color: #2d3748;
        font-weight: 600;
        text-align: right;
        flex: 2;
        word-break: break-all;
      }

      .status-indicator {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 8px;
      }

      .status-online {
        background: #48bb78;
      }

      .status-offline {
        background: #f56565;
      }

      .feature-support {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
      }

      .feature-tag {
        background: #e6fffa;
        color: #234e52;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 500;
      }

      .feature-tag.supported {
        background: #c6f6d5;
        color: #22543d;
      }

      .feature-tag.not-supported {
        background: #fed7d7;
        color: #742a2a;
      }

      .refresh-btn {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        border: none;
        padding: 12px 30px;
        border-radius: 25px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: block;
        margin: 30px auto 0;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
      }

      .refresh-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
      }

      .refresh-btn:active {
        transform: translateY(0);
      }

      /* 移动端适配 */
      @media (max-width: 768px) {
        body {
          padding: 15px;
        }

        .header h1 {
          font-size: 2rem;
        }

        .info-grid {
          grid-template-columns: 1fr;
          gap: 15px;
        }

        .info-card {
          padding: 20px;
        }

        .card-title {
          font-size: 1.2rem;
        }

        .info-item {
          flex-direction: column;
          align-items: flex-start;
          gap: 5px;
        }

        .info-value {
          text-align: left;
          font-size: 0.9rem;
        }
      }

      @media (max-width: 480px) {
        .header h1 {
          font-size: 1.8rem;
        }

        .info-card {
          padding: 15px;
        }
      }

      /* 加载动画 */
      .loading {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #667eea;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1>🌐 浏览器信息检测器</h1>
        <p>全面检测您的浏览器环境和设备信息</p>
      </div>

      <div class="info-grid">
        <!-- 基本信息 -->
        <div class="info-card">
          <div class="card-title">
            <div class="card-icon">🔍</div>
            基本信息
          </div>
          <div class="info-item">
            <span class="info-label">浏览器名称</span>
            <span class="info-value" id="browserName">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">浏览器版本</span>
            <span class="info-value" id="browserVersion">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">浏览器内核</span>
            <span class="info-value" id="browserEngine">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">User Agent</span>
            <span class="info-value" id="userAgent">检测中...</span>
          </div>
        </div>

        <!-- 设备信息 -->
        <div class="info-card">
          <div class="card-title">
            <div class="card-icon">📱</div>
            设备信息
          </div>
          <div class="info-item">
            <span class="info-label">设备类型</span>
            <span class="info-value" id="deviceType">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">操作系统</span>
            <span class="info-value" id="operatingSystem">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">屏幕分辨率</span>
            <span class="info-value" id="screenResolution">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">可用分辨率</span>
            <span class="info-value" id="availableResolution">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">设备像素比</span>
            <span class="info-value" id="devicePixelRatio">检测中...</span>
          </div>
        </div>

        <!-- 网络信息 -->
        <div class="info-card">
          <div class="card-title">
            <div class="card-icon">🌐</div>
            网络信息
          </div>
          <div class="info-item">
            <span class="info-label">在线状态</span>
            <span class="info-value" id="onlineStatus">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">连接类型</span>
            <span class="info-value" id="connectionType">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">网络速度</span>
            <span class="info-value" id="connectionSpeed">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">语言设置</span>
            <span class="info-value" id="language">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">时区</span>
            <span class="info-value" id="timezone">检测中...</span>
          </div>
        </div>

        <!-- 浏览器功能 -->
        <div class="info-card">
          <div class="card-title">
            <div class="card-icon">⚙️</div>
            浏览器功能
          </div>
          <div class="info-item">
            <span class="info-label">Cookie 支持</span>
            <span class="info-value" id="cookieEnabled">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">JavaScript 版本</span>
            <span class="info-value" id="jsVersion">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">本地存储</span>
            <span class="info-value" id="localStorage">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">会话存储</span>
            <span class="info-value" id="sessionStorage">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">WebGL 支持</span>
            <span class="info-value" id="webglSupport">检测中...</span>
          </div>
        </div>

        <!-- HTML5 功能支持 -->
        <div class="info-card">
          <div class="card-title">
            <div class="card-icon">🚀</div>
            HTML5 功能支持
          </div>
          <div class="feature-support" id="html5Features">
            <div class="loading"></div>
          </div>
        </div>

        <!-- 硬件信息 -->
        <div class="info-card">
          <div class="card-title">
            <div class="card-icon">💻</div>
            硬件信息
          </div>
          <div class="info-item">
            <span class="info-label">CPU 核心数</span>
            <span class="info-value" id="cpuCores">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">内存大小</span>
            <span class="info-value" id="memory">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">GPU 信息</span>
            <span class="info-value" id="gpuInfo">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">触摸支持</span>
            <span class="info-value" id="touchSupport">检测中...</span>
          </div>
          <div class="info-item">
            <span class="info-label">电池状态</span>
            <span class="info-value" id="batteryStatus">检测中...</span>
          </div>
        </div>
      </div>

      <button class="refresh-btn" onclick="refreshInfo()">🔄 刷新信息</button>
    </div>

    <script>
      // 浏览器检测函数
      function detectBrowser() {
        const userAgent = navigator.userAgent;
        let browserName = "未知浏览器";
        let browserVersion = "未知版本";
        let browserEngine = "未知内核";

        // 检测浏览器
        if (
          userAgent.indexOf("Chrome") > -1 &&
          userAgent.indexOf("Edg") === -1
        ) {
          browserName = "Google Chrome";
          browserEngine = "Blink";
          const match = userAgent.match(/Chrome\/(\d+)/);
          if (match) browserVersion = match[1];
        } else if (userAgent.indexOf("Firefox") > -1) {
          browserName = "Mozilla Firefox";
          browserEngine = "Gecko";
          const match = userAgent.match(/Firefox\/(\d+)/);
          if (match) browserVersion = match[1];
        } else if (
          userAgent.indexOf("Safari") > -1 &&
          userAgent.indexOf("Chrome") === -1
        ) {
          browserName = "Safari";
          browserEngine = "WebKit";
          const match = userAgent.match(/Version\/(\d+)/);
          if (match) browserVersion = match[1];
        } else if (userAgent.indexOf("Edg") > -1) {
          browserName = "Microsoft Edge";
          browserEngine = "Blink";
          const match = userAgent.match(/Edg\/(\d+)/);
          if (match) browserVersion = match[1];
        } else if (
          userAgent.indexOf("Opera") > -1 ||
          userAgent.indexOf("OPR") > -1
        ) {
          browserName = "Opera";
          browserEngine = "Blink";
          const match = userAgent.match(/(Opera|OPR)\/(\d+)/);
          if (match) browserVersion = match[2];
        }

        return { browserName, browserVersion, browserEngine };
      }

      // 设备类型检测
      function detectDeviceType() {
        const userAgent = navigator.userAgent;
        if (
          /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
            userAgent
          )
        ) {
          if (/iPad/i.test(userAgent)) return "平板电脑";
          return "移动设备";
        }
        return "桌面设备";
      }

      // 操作系统检测
      function detectOS() {
        const userAgent = navigator.userAgent;
        if (userAgent.indexOf("Windows NT 10.0") !== -1) return "Windows 10/11";
        if (userAgent.indexOf("Windows NT 6.3") !== -1) return "Windows 8.1";
        if (userAgent.indexOf("Windows NT 6.2") !== -1) return "Windows 8";
        if (userAgent.indexOf("Windows NT 6.1") !== -1) return "Windows 7";
        if (userAgent.indexOf("Mac OS X") !== -1) return "macOS";
        if (userAgent.indexOf("Linux") !== -1) return "Linux";
        if (userAgent.indexOf("Android") !== -1) return "Android";
        if (userAgent.indexOf("iPhone") !== -1) return "iOS";
        return "未知系统";
      }

      // 网络连接信息
      function getConnectionInfo() {
        const connection =
          navigator.connection ||
          navigator.mozConnection ||
          navigator.webkitConnection;
        if (connection) {
          return {
            type: connection.effectiveType || connection.type || "未知",
            speed: connection.downlink ? `${connection.downlink} Mbps` : "未知",
          };
        }
        return { type: "未知", speed: "未知" };
      }

      // WebGL 检测
      function detectWebGL() {
        try {
          const canvas = document.createElement("canvas");
          const gl =
            canvas.getContext("webgl") ||
            canvas.getContext("experimental-webgl");
          if (gl) {
            const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
            return {
              supported: true,
              renderer: debugInfo
                ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)
                : "未知",
            };
          }
        } catch (e) {}
        return { supported: false, renderer: "不支持" };
      }

      // HTML5 功能检测
      function detectHTML5Features() {
        const features = [
          {
            name: "Canvas",
            supported: !!document.createElement("canvas").getContext,
          },
          { name: "WebGL", supported: detectWebGL().supported },
          { name: "Local Storage", supported: typeof Storage !== "undefined" },
          {
            name: "Session Storage",
            supported: typeof Storage !== "undefined",
          },
          { name: "Geolocation", supported: !!navigator.geolocation },
          {
            name: "WebRTC",
            supported: !!(
              navigator.getUserMedia ||
              navigator.webkitGetUserMedia ||
              navigator.mozGetUserMedia
            ),
          },
          { name: "WebSocket", supported: !!window.WebSocket },
          { name: "Web Workers", supported: !!window.Worker },
          { name: "Service Worker", supported: "serviceWorker" in navigator },
          { name: "IndexedDB", supported: !!window.indexedDB },
          {
            name: "WebAudio",
            supported: !!(window.AudioContext || window.webkitAudioContext),
          },
          { name: "WebVR", supported: !!navigator.getVRDisplays },
          { name: "Push API", supported: "PushManager" in window },
          { name: "Notification", supported: "Notification" in window },
        ];
        return features;
      }

      // 电池状态检测
      async function getBatteryInfo() {
        try {
          if ("getBattery" in navigator) {
            const battery = await navigator.getBattery();
            return `${Math.round(battery.level * 100)}% ${
              battery.charging ? "(充电中)" : "(未充电)"
            }`;
          }
        } catch (e) {}
        return "不支持";
      }

      // 更新页面信息
      async function updateBrowserInfo() {
        const browserInfo = detectBrowser();
        const connectionInfo = getConnectionInfo();
        const webglInfo = detectWebGL();
        const html5Features = detectHTML5Features();

        // 基本信息
        document.getElementById("browserName").textContent =
          browserInfo.browserName;
        document.getElementById("browserVersion").textContent =
          browserInfo.browserVersion;
        document.getElementById("browserEngine").textContent =
          browserInfo.browserEngine;
        document.getElementById("userAgent").textContent = navigator.userAgent;

        // 设备信息
        document.getElementById("deviceType").textContent = detectDeviceType();
        document.getElementById("operatingSystem").textContent = detectOS();
        document.getElementById(
          "screenResolution"
        ).textContent = `${screen.width} × ${screen.height}`;
        document.getElementById(
          "availableResolution"
        ).textContent = `${screen.availWidth} × ${screen.availHeight}`;
        document.getElementById("devicePixelRatio").textContent =
          window.devicePixelRatio || 1;

        // 网络信息
        const onlineStatus = navigator.onLine;
        document.getElementById(
          "onlineStatus"
        ).innerHTML = `<span class="status-indicator ${
          onlineStatus ? "status-online" : "status-offline"
        }"></span>${onlineStatus ? "在线" : "离线"}`;
        document.getElementById("connectionType").textContent =
          connectionInfo.type;
        document.getElementById("connectionSpeed").textContent =
          connectionInfo.speed;
        document.getElementById("language").textContent =
          navigator.language || navigator.userLanguage;
        document.getElementById("timezone").textContent =
          Intl.DateTimeFormat().resolvedOptions().timeZone;

        // 浏览器功能
        document.getElementById("cookieEnabled").textContent =
          navigator.cookieEnabled ? "支持" : "不支持";
        document.getElementById("jsVersion").textContent = "ES6+";
        document.getElementById("localStorage").textContent =
          typeof Storage !== "undefined" ? "支持" : "不支持";
        document.getElementById("sessionStorage").textContent =
          typeof Storage !== "undefined" ? "支持" : "不支持";
        document.getElementById("webglSupport").textContent =
          webglInfo.supported ? "支持" : "不支持";

        // HTML5 功能支持
        const featuresContainer = document.getElementById("html5Features");
        featuresContainer.innerHTML = "";
        html5Features.forEach((feature) => {
          const tag = document.createElement("span");
          tag.className = `feature-tag ${
            feature.supported ? "supported" : "not-supported"
          }`;
          tag.textContent = `${feature.name} ${feature.supported ? "✓" : "✗"}`;
          featuresContainer.appendChild(tag);
        });

        // 硬件信息
        document.getElementById("cpuCores").textContent =
          navigator.hardwareConcurrency || "未知";
        document.getElementById("memory").textContent = navigator.deviceMemory
          ? `${navigator.deviceMemory} GB`
          : "未知";
        document.getElementById("gpuInfo").textContent = webglInfo.renderer;
        document.getElementById("touchSupport").textContent =
          "ontouchstart" in window ? "支持" : "不支持";

        // 电池状态
        const batteryInfo = await getBatteryInfo();
        document.getElementById("batteryStatus").textContent = batteryInfo;
      }

      // 刷新信息
      function refreshInfo() {
        // 显示加载状态
        const loadingElements = document.querySelectorAll(".info-value");
        loadingElements.forEach((el) => {
          if (el.id !== "html5Features") {
            el.textContent = "检测中...";
          }
        });

        // 重新检测
        setTimeout(updateBrowserInfo, 500);
      }

      // 页面加载完成后执行
      document.addEventListener("DOMContentLoaded", updateBrowserInfo);

      // 监听在线状态变化
      window.addEventListener("online", updateBrowserInfo);
      window.addEventListener("offline", updateBrowserInfo);
    </script>
  </body>
</html>
